<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleReturn">返回</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '个人信息',
                icon: 'clarity:info-standard-line',
                onClick: handlePersonalInfo.bind(null, record),
              },
              {
                label: '设为组长',
                icon: 'clarity:success-standard-line',
                onClick: handleBindCaptain.bind(null, record),
              },
              {
                label: '撤销组长',
                color: 'error',
                icon: 'ant-design:delete-outlined',
                popConfirm: {
                  title: '确认撤销？',
                  okText: '确认',
                  cancelText: '取消',
                  confirm: handleDumpCaptain.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <ProfileDesc @register="registerProfileDescModal" />
  </div>
</template>
<script lang="ts" setup>
  import { useMessage } from "/@/hooks/web/useMessage";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import { useRoute, useRouter } from "vue-router";
  import { useModal } from "/@/components/Modal";
  import ProfileDesc from "/@/views/default/account/ProfileDesc.vue";
  import { bindCaptainApi, dumpCaptainApi, getUserListByTutorApi } from "/@/api/core/group";
  import { useTabs } from "/@/hooks/web/useTabs";
  import { teacherBasicColumns } from "/@/views/default/data";
  import { getUserInfo } from "/@/api/core/user";

  const router = useRouter();
  const route = useRoute();
  const { groupId } = route.query;

  const [registerTable, { setLoading }] = useTable({
    title: "小组成员",
    rowKey: "userId",
    columns: teacherBasicColumns,
    api: getUserListByTutorApi,
    actionColumn: {
      width: 320,
      ...defaultActionColumn,
    },
    ...defaultTableSettings,
    beforeFetch(params) {
      return { ...params, groupId };
    },
  });

  const [registerProfileDescModal, { openModal: openProfileDescModal }] = useModal();

  const { createMessage } = useMessage();

  async function handlePersonalInfo(record) {
    try {
      setLoading(true);
      const personalInfo = await getUserInfo(record.userId, record.userCode);
      openProfileDescModal(true, personalInfo);
    } finally {
      setLoading(false);
    }
  }
  async function handleBindCaptain(record) {
    try {
      setLoading(true);
      await bindCaptainApi(record.userId, record.groupId);
      createMessage.success("设为小组长成功");
    } finally {
      setLoading(false);
    }
  }

  async function handleDumpCaptain(record) {
    try {
      setLoading(true);
      await dumpCaptainApi(record.userId, record.groupId);
      createMessage.success("撤销小组长成功");
    } finally {
      setLoading(false);
    }
  }

  const { closeCurrent } = useTabs();

  function handleReturn() {
    closeCurrent();
    router.back();
  }
</script>
